<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>萧山气象局风险灾害管理平台</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
    <!--页头-->
    <div id="header">
        <div class="headerContent">
          <div class="headerLeft lf">
            <a href="">
              <img class="lf" width="50" src="../imgs/qx_log.png" alt="logo">
            </a>
            <span >萧山气象局风险灾害管理平台</span>
            <div class="clear"></div>
          </div>
          <div class="headerRight rt">
            <div class="headerDate rt">
              <span>2017/09/06</span>
              <span>下午 16:18</span>
            </div>
            <ul class="rt">
              <li class="active">
                <a href="">
                  <span>台风灾害</span>
                </a>
              </li>
              <li >
                <a href="../index.html">
                  <span>暴雨洪涝</span>
                </a>
              </li>
              <li>
                <a href="">
                  <span>雷电风险</span>
                </a>
              </li>
              <li>
                <a href="">
                  <span>雪灾</span>
                </a>
              </li>
              <li >
                <a href="">
                  <span>工作台</span>
                </a>
              </li>
            </ul>   
          </div>
        </div> 
    </div>
    <!--主体-->
    <div class="section">
        <!-- 主体视图-->
        <div class="sectionLeft lf w700">
            <!--选择栏-->
            <div class="selectColumn lh40">
                <form action="">
                    <input type="checkbox">风险等级
                    <input type="checkbox">地形地貌
                    <input type="checkbox">暴露性
                    <input type="checkbox">防风能力
                </form>
            </div>
            <!--视图-->
            <div class="mainView">
                <div id="container"></div>
                <div class="changeTime">
                    <button class="changeNext lf"><</button>
                    <ul>
                      <!--   <li class="active">
                            <span class="upRect"></span>
                            <span>13:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>13:00</span>
                            <i ></i>
                            <b class="changeDay">10/14</b>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>13:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>13:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>

                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li>
                        <li>
                            <span class="upRect"></span>
                            <span>3:00</span>
                        </li> -->
                    </ul>
                    <button class="changePrev rt" disabled>></button>
                    
                </div>
                <!-- 色标 -->
                <div class="colorCode windColor">
                    <!-- <p>12小时降水预报</p> -->
                    <ul >
                       
                    </ul>
                </div>
               
            </div>
        </div>
        <!-- 右边栏-->
        <form class="sectionRight lf w300" action="">
            <!--发布时间-->
            <div class="pubTime lh40 padLeft20 bgColor1">
                发布时间：
                <input type="text" class="w180 border">
            </div>
            <!--控制面板-->
            <div class="console">
                <h5 class="lh40 padLeft20">台风灾害</h5>
                <ul class="overflow padLeft20">
                    <!-- <li>
                        <input type="radio" name="typhoonTime" value="current" checked>当前时刻
                    </li> -->
                   <!--  <li>
                        <input type="radio" name="typhoonTime" value="oneHour">未来1小时预警
                    </li> -->
                    <li>
                        <input type="radio" name="typhoonTime" checked value="threeHour">3小时预报
                    </li>
                 <!--    <li>
                        <input type="radio" name="typhoonTime" value="sixHour">未来6小时预警
                    </li> -->
                   <!--  <li>
                        <input type="radio" name="typhoonTime" value="twelveHour">未来12小时预警
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="twentyfourHour">未来24小时预警
                    </li> -->
                </ul>
            </div>
            <!--按钮组-->
            <div class="btns">
                <button class="btnThreshold" type="button">预警阈值设置</button>
                <br/>
                <button>风险灾害阈值设置</button>
            </div>
        </form>
    </div>
    <!--弹出框：阈值设置-->
    <div class="threshold displayNone">
        <div class="thresholdBox">
            <div class="thresholdHeader">台风未来3小时阈值详情</div>
            <form class="thresholdSelect" action="#">
                <select>
                    <option value="1">塔楼镇</option>
                    <option value="2">Saab</option>
                    <option value="3">Opel</option>
                    <option value="4">Audi</option>
                </select>
                <select>
                    <option value="1">塔楼镇</option>
                    <option value="2">Saab</option>
                    <option value="3">Opel</option>
                    <option value="4">Audi</option>
                </select>
                <table class="thresholdTable">
                    <thead>
                    <tr>
                        <td>序号</td>
                        <td>名称</td>
                        <td>有一定风险</td>
                        <td>风险较高</td>
                        <td>风险高</td>
                        <td>风险很高</td>
                        <td>单位</td>
                    </tr>
                </thead>
                    <tbody>
                    <tr class="odd">
                        <td>1</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr class="odd">
                        <td>3</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr class="odd">
                        <td>5</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>

                </tbody>
                </table>
                <div class="confirm">
                    <button class="marRight20">确认</button>
                    <button type="button" class="confirmCancel">取消</button>
                </div>
            </form>
        </div>
    </div>
    <!--js文件引入-->
    <script src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript" src="http://10.135.30.150:8080/QXMap?key=712ea9b0cf705b05&v=1.0">
     </script>
     <!-- <script type="text/javascript" src="http://10.135.30.116:8080/ZJDataCenter/api/RADA_L3_MST_Hail/getContourValidtimeListByTime?userid=zjwlzx&pwd=123&productcategory=hail&fcstlevel=0&time=20170821100000&timetype=D&admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json">
     </script> -->
    <script src="../js/wind.js"></script>
</body>
</html>